<template>
  <div class="cabinet-main flex">
    <div class="left">
      <custom-head bold text="机房概览"></custom-head>
      <el-row class="mt15" type="flex" justify="space-between">
        <el-input size="mini" clearable v-model="form.resourceName" placeholder="请输入资产名"></el-input>
        <el-input size="mini" style="margin: 0 10px;" clearable v-model="form.hostName"
          placeholder="请输入主机名"></el-input>
        <el-button size="mini" type="primary" @click="handleSelect">查询</el-button>
      </el-row>
      <custom-head text="选择机房" class=mt15>
        <div>
          共<span class="primary-color">{{ selecData.length }}</span>个机房
        </div>
      </custom-head>
      <el-form :model="form" :rules="rules" ref="form" label-width="52px" class="form mt15">
        <el-form-item label="机房" prop="name">
          <el-select size="mini" v-model="form.selectValue" @change="getRoomInfo(form.selectValue)" placeholder="请选择机房"
            style="width: 100%;">
            <el-option :label="item.title" :value="item.resourceId" v-for="item in selecData" />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="abstract">
        <custom-head text="机房摘要"></custom-head>
        <!-- <div class="address mt15">
          机房位置：{{ roomInfo.position }}
        </div> -->
        <div class="info">
          <div class="flex-ac">
            <div class="bg">
              <img src="@/assets/computerRoom/box.png" alt="" srcset="">
            </div>
            <div>
              <div class="num">{{ roomInfo.totalCapacity || 0 }}</div>
              <div class="text-ov">空间总数量</div>
            </div>
          </div>
          <div class="flex-ac">
            <div class="bg">
              <img src="@/assets/computerRoom/error.png" alt="" srcset="">
            </div>
            <div>
              <div class="num">{{ roomInfo.deviceAlertCount || 0 }}</div>
              <div>告警总数</div>
            </div>
          </div>
          <div class="flex-ac">
            <div class="bg">
              <img src="@/assets/computerRoom/cabinet.png" alt="" srcset="">
            </div>
            <div>
              <div class="num">{{ roomInfo.totalCabinetCount || 0 }}</div>
              <div>机柜数量</div>
            </div>
          </div>
          <div class="flex-ac">
            <div class="bg">
              <img src="@/assets/computerRoom/source.png" alt="" srcset="">
            </div>
            <div>
              <div class="num">{{ roomInfo.onShelfAssets || 0 }}</div>
              <div class="text-ov">在架资产数量</div>
            </div>
          </div>
        </div>
      </div>
      <div class="abstract cabinet mt25">
        <el-row type="flex" justify="space-between">
          <custom-head text="机柜摘要"></custom-head>
        </el-row>
        <div class="mt15">
          <div class="block">机柜编号： <span>{{ cabinetInfo.resourceNum }}</span></div>
          <div class="block">机柜名称： <span>{{ cabinetInfo.resourceName }}</span></div>
        </div>
        <div class="info">
          <div class="flex-ac">
            <div class="bg">
              <img src="@/assets/computerRoom/u-count.png" alt="" srcset="">
            </div>
            <div>
              <div class="num">{{ cabinetInfo.totalU || 0 }}</div>
              <div>U位总数</div>
            </div>
          </div>
          <div class="flex-ac">
            <div class="bg">
              <img src="@/assets/computerRoom/source.png" alt="" srcset="">
            </div>
            <div>
              <div class="num">{{ cabinetInfo.onShelfNum || 0 }}</div>
              <div class="text-ov">在架资产数量</div>
            </div>
          </div>
          <div class="flex-ac">
            <div class="bg">
              <img src="@/assets/computerRoom/u-use.png" alt="" srcset="">
            </div>
            <div>
              <div class="num">{{ cabinetInfo.usedU || 0 }}</div>
              <div class="text-ov">已使用U数</div>
            </div>
          </div>

          <div class="flex-ac ">
            <div class="bg">
              <img src="@/assets/computerRoom/u-residue.png" alt="" srcset="">
            </div>
            <div>
              <div class="num">{{ cabinetInfo.residualU || 0 }}</div>
              <div>剩余U数</div>
            </div>
          </div>
          <div class="flex-ac ">
            <div class="bg">
              <img src="@/assets/computerRoom/use-rate.png" alt="" srcset="">
            </div>
            <div>
              <div class="num">{{ cabinetInfo.rateU || 0 }}%</div>
              <div class="text-ov">U位利用率</div>
            </div>
          </div>
          <div class="flex-ac">
            <div class="bg">
              <img src="@/assets/computerRoom/error.png" alt="" srcset="">
            </div>
            <div>
              <div class="num">{{ cabinetInfo.alterNum || 0 }}</div>
              <div>告警总数</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="flex-jsb wrap">
        <div class="assets-status">
          资产状态：
          <span>正常</span>
          <span>重要告警</span>
          <span>紧急告警</span>
        </div>
        <div class="u-status">
          U位状态：
          <span>预释放</span>
          <span>预占用</span>
          <span>非法占用</span>
        </div>
      </div>
      <div>
        <cabinet-componts :cabinetList="cabinetList" :cabinetIdList="roomInfo.cabinetList" :showModal="true"
          @loadData="loadData" @selectCabinet="slideClick" />
      </div>
    </div>
  </div>
</template>
<script>
import { getMachineRoom, getMachineRoomInfo, searchResource, getCabinetDetail } from "@/api/computerRoomApi.js";
import CabinetComponts from "@/components/cabinetComponts/index.vue"
import customHead from "@/components/head/index.vue"

export default {
  components: {
    CabinetComponts, customHead
  },
  data() {
    return {
      selecData: [],
      form: {
        selectValue: "",//下拉选中
        hostName: "",//主机名
        resourceName: "",//资源名
      },
      rules: {
        name: [
          { required: true, message: "请输入机房名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },//
      roomInfo: {},//机房信息
      cabinetId: "",//
      cabinetInfo: {},//当前选中的机柜信息
      cabinetList: [],//机柜列表
    };
  },
  mounted() {
    // 获取所有机房列表
    getMachineRoom().then(res => {
      if (res.code == "200") {
        this.selecData = res.info;
        this.form.selectValue = this.selecData[0].resourceId;
        // 机房详情
        this.getRoomInfo(this.form.selectValue)
        return
      }
      this.message(res.msg, 3);
    });
  },
  methods: {
    getRoomInfo(id) {
      // 获取机房详情
      getMachineRoomInfo({ resourceId: id }).then(res => {
        if (res.code == "200") {
          this.roomInfo = res.info;
          // 获取机柜详情
          if (this.roomInfo.cabinetList.length) {
            this.cabinetId = this.roomInfo.cabinetList[0];
            this.loadData({ id: this.cabinetId }, true);
          }
          return
        }
        this.message(res.msg, 3)
      });
    },

    handleSelect() {
      if (!this.form.hostName && !this.form.resourceName) {
        this.message("请输入要查询的名称", 3)
        return
      }
      searchResource({
        roomResourceId: this.form.selectValue,
        hostName: this.form.hostName,
        resourceName: this.form.resourceName,
      }).then(res => {
        if (res.code == "200") {
          this.cabinetList = res.info;
          // 
    
          // this.cabinetInfo = res.info[1]
          return
        }
        // this.message(res.msg)
      })
    },
    loadData({ id, type }, isFirst = false) {
      console.log(id, type);
      getCabinetDetail({ resourceId: id, type }).then(res => {
        if (res.code == "200") {
          console.log(res);
          if (isFirst) {
            // 首次进入默认选中第一条
            this.cabinetInfo = res.info.length ? res.info[1] : {};
          }
          this.cabinetList = [...res.info];
          if (type == 2) {
            this.cabinetList.unshift([])
          } else {
            this.cabinetList.push([])
          }
          console.log(this.cabinetList);
          return
        }
        // this.message(res.msg, 3)
      })
    },
    // emit
    slideClick(data) {
      this.cabinetInfo = data
      console.log(data, "handleSlide")
    },
    // 处理U位上的资源
    /**
     * 机位分配 推荐位置你那边有算好吗
     * @param {*} array 
     */
    formatCabinetList(array) {
      if (!array || !array.length) return;
      return array.map((item) => {
        if (item.udetailList) {
          // item.udetailList
          // let uIndex = array.findIndex(({ startU, heightU }) => value < startU + heightU && value >= startU);
          // if (uIndex > -1) {
          //   return array[uIndex]
          // }











        } else {
          item.udetailList = [];
        }
      })
    }
  },
};
</script>
<style lang="scss">
.cabinet-main {
  width: 100%;
  height: 100%;
  overflow: auto;
  margin: 0 auto;

  .left {
    width: 27%;
    min-width: 27%;
    height: 100%;
    padding: 16px;
    overflow: auto;
    box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
    border-radius: 10px;
    background-color: #fff;

    .abstract {
      margin-top: 16px;
      background: #f0f0f0;
      border-radius: 6px;
      padding: 15px;


      .subText {
        font-size: 14px;
        color: #666666;
      }

      .form {
        margin-top: 16px;

        .el-form-item {
          margin-bottom: 10px;
        }
      }

      .address {
        font-size: 14px;
        color: #000;
        background: #FFF;
        border-radius: 6px;
        padding: 9px 15px;
      }

      .info {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .flex-ac {
          padding: 15px;
          background-color: #fff;
          width: 48%;
          height: 70px;
          margin-top: 10px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 15px;
          color: #666;
          box-shadow: 5px 0px 10px 0px rgba(165, 199, 194, 0.2);
          border-radius: 6px;

          >div:nth-child(2) {
            width: 70%;
          }

          .bg {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 5px;
            flex-shrink: 0;

            img {
              width: 20px;
              height: 20px;
              margin: 10px auto;
              display: block;
            }
          }

          &:nth-child(1) .bg {
            background: rgba(0, 162, 255, 0.2);
          }

          &:nth-child(2) .bg {
            background: rgba(239, 110, 110, 0.2);

          }

          &:nth-child(3) .bg {
            background: rgba(125, 74, 218, 0.2);

          }

          &:nth-child(4) .bg {
            background: rgba(0, 196, 171, 0.2);
          }

          &:nth-child(5) .bg {
            background: rgba(20, 211, 78, 0.2);
          }

          .num {
            font-size: 20px;
          }

          &:nth-child(1) .num {
            color: #00A2FF;
          }

          &:nth-child(2) .num {
            color: #EF6E6E;

          }

          &:nth-child(3) .num {
            color: #7D4ADA;

          }

          &:nth-child(4) .num {
            color: #00C4AB;

          }
        }
      }
    }

    .cabinet {
      margin-top: 30px;

      .block {
        background: #FFF;
        padding: 9px 15px;
        border-radius: 6px 6px 0 0px;
      }

      .block:nth-child(2) {
        border-radius: 0px 0px 6px 6px;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          top: 0px;
          left: 15px;
          width: 90%;
          height: 1px;
          background: #f0f0f0;
        }
      }

      .info {
        .flex-ac {
          &:nth-child(1) .bg {
            background: rgba(33, 183, 149, 0.2);
          }

          &:nth-child(2) .bg {
            background: rgba(27, 190, 220, 0.2);
          }

          &:nth-child(3) .bg {
            background: rgba(184, 51, 240, 0.2);
          }

          &:nth-child(4) .bg {
            background: rgba(231, 152, 0, 0.2);
          }

          &:nth-child(5) .bg {
            background: rgba(23, 199, 0, 0.2);
          }

          &:nth-child(6) .bg {
            background: rgba(239, 110, 110, 0.2);
          }

          &:nth-child(1) .num {
            color: #21B795;
          }

          &:nth-child(2) .num {
            color: #1BBEDC;
          }

          &:nth-child(3) .num {
            color: #B833F0;
          }

          &:nth-child(4) .num {
            color: #E79800;
          }

          &:nth-child(5) .num {
            color: #17C700;
          }

          &:nth-child(6) .num {
            color: #EF6E6E;
          }
        }
      }

    }
  }

  .right {
    flex: 1;
    padding: 16px;
    margin-left: 16px;
    overflow: auto;
    box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
    border-radius: 10px;
    background-color: #fff;

    .wrap {
      width: 78%;
      margin: 0 auto;

      .assets-status,
      .u-status {
        font-size: 16px;
        color: #333;
        font-weight: bold;

        span {
          font-size: 14px;
          color: #666;
          position: relative;
          margin: 0 15px;
          font-weight: 400;

          &::before {
            content: "";
            position: absolute;
            width: 8px;
            height: 8px;
            left: -13px;
            top: 7px;
            background: #00B75F;
          }
        }
      }

      .assets-status {
        span {
          &::before {
            border-radius: 50%;
          }
        }

        span:nth-child(2) {
          &::before {
            background-color: #FFCC00;
          }
        }

        span:nth-child(3) {
          &::before {
            background-color: #EA305C;
          }
        }
      }

      .u-status {
        span:nth-child(1) {
          &::before {
            background-color: #60BAF9;
          }
        }

        span:nth-child(2) {
          &::before {
            background-color: #CE7FF0;
          }
        }

        span:nth-child(3) {
          &::before {
            background-color: #F2839D;
          }
        }
      }
    }
  }
}

</style>

